{include file="common/header"}
<style>
    @media screen and (min-width: 100px) {
        .sourceImageCss {
            height: 200px;
            background-color: rgb(247, 247, 247);
            border: 1px solid rgb(200, 200, 200);
        }

        .previewImageCss {
            width: 180px;
            height: 180px;
            border: 1px solid rgb(200, 200, 200);
            overflow: hidden;
            margin-left: 5px;
        }

        .sourceImageDiv {
            width: 100%;
        }

        .options {
            display: flex;
            flex-wrap: wrap;
        }

        .optionsMargin {
            margin: 0 !important;
        }

    }

    @media screen and (min-width: 500px) {
        .sourceImageCss {
            height: 325px;
            background-color: rgb(247, 247, 247);
        }

        .previewImageCss {
            width: 210px;
            height: 210px;
            border: 1px solid rgb(200, 200, 200);
            overflow: hidden;
            margin-left: 0px;
        }

        .containerDiv {
            display: flex;
        }

        .sourceImageDiv {
            width: 66.7%;
        }

        .previewImageDiv {
            flex-shrink: 0;
        }

        .options {
        }

        .optionsMargin {
        }
    }
</style>
<body class="pear-container">
<div class="layui-row layui-col-space15 containerDiv">
    <div class="layui-col-xs8 sourceImageDiv">
        <div class="sourceImageCss">
            <img id="sourceImage" src="">
        </div>
    </div>
    <div class="layui-col-xs4 previewImageDiv" style="padding-left:0px;">
        <div id="previewImage" class="previewImageCss">
        </div>
    </div>
</div>
<div class="layui-row">
    <div class="layui-form-item options">
        <div class="layui-input-inline layui-btn-container optionsMargin" style="width: auto;vertical-align:top;">
            <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-left" cropper-event="rotate"
                    data-option="-15" title="左旋15°"></button>
            <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-right" cropper-event="rotate"
                    data-option="15" title="右旋15°"></button>
            <button class="pear-btn pear-btn-sm pear-btn-danger layui-icon layui-icon-refresh" cropper-event="reset"
                    title="重置"></button>
            <label for="uploadPicture" class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-upload"
                   title="选择图片"></label>
            <input class="layui-upload-file" id="uploadPicture" type="file" value="选择图片">
        </div>
        <div class="layui-form-mid layui-word-aux optionsMargin">建议:{$width}:{$height},大小在{$size/1024/1024}m以内。</div>
    </div>
</div>
<script>
    layui.use(['jquery', 'layer', 'cropper'], function () {
        let $ = layui.jquery;
        let layer = layui.layer;
        let cropper = layui.cropper;

        var options = {
            aspectRatio: "{$width}" / "{$height}", // 裁剪框比例
            preview: '#previewImage', // 预览div
            viewmode: 1
        };

        $("#sourceImage").attr("src", "{$image}");
        $("#sourceImage").cropper(options);

        window.submitForm = function () {
            return new Promise((resolve, reject) => {
                $("#sourceImage").crossOrigin = 'anonymous';//解决跨域图片问题
                var sourceBlob = $("#sourceImage").cropper("getCroppedCanvas", {
                    width: 280,
                    height: 140
                });
                if (sourceBlob == null){
                    parent.layer.msg("请选择图片", {icon: 5});
                    return false;
                }
                sourceBlob.toBlob(function (blob) {
                    var timeStamp = Date.parse(new Date());
                    var fileName = timeStamp + '.jpg';
                    var formData = new FormData();
                    formData.append('file', blob, fileName);
                    var reader = new FileReader();
                    reader.readAsDataURL(blob);
                    reader.onload = function (e) {
                        $.ajax({
                            url: "{:url('Index/upload')}?type=image&path={$path}&save={$save}",
                            data: formData,
                            type: 'post',
                            async: false,
                            contentType: false,
                            processData: false,
                            success: function (res) {
                                if (res.code == 0) {
                                    resolve(res.data);
                                } else {
                                    parent.layer.msg("上传文件错误：" + res.msg, {icon: 5});
                                    return false;
                                }
                            }
                        });
                    };
                });
            })

        }

        $(".pear-btn").on('click', function () {
            var event = $(this).attr("cropper-event");

            if (event === 'rotate') {
                var option = $(this).attr('data-option');
                $("#sourceImage").cropper('rotate', option);
            } else if (event === 'reset') {
                $("#sourceImage").cropper('reset');
            }

            $("#uploadPicture").change(function () {
                var r = new FileReader();
                var f = this.files[0];

                if (f.type !== 'image/jpeg' && f.type !== 'image/tiff' && f.type !== 'image/gif' && f.type !== 'image/png' && f.type !== '') {
                    parent.layer.msg("图片类型错误", {icon: 5});
                    return false;
                }

                if (f.size > "{$size}") {
                    parent.layer.msg("上传文件不得超过{$size/1024/1024}m", {icon: 5});
                    return false;
                }

                r.readAsDataURL(f);
                r.onload = function (e) {
                    $("#sourceImage")
                        .cropper('destroy')
                        .attr('src', this.result)
                        .cropper(options);
                };
            });
        });
    });
</script>
</body>

</html>